
<template>
    <Layout>
        <template slot="meta">
            <title>{{data.pageTitle}}</title>
        </template>
        <div slot="header">
            <Header></Header>
            <Tabs></Tabs>
            <div class="tabs flex flex-wrap">
                分类：
                <div class="tabs-item" :class="{'active': item.id === query.id}" :key="item.id" v-for="item in [...data.catetoryData.imgList,...data.catetoryData.list]">
                    <a :href="`/wallpaper?id=${item.id}&type=${query.type}`">{{ item.name }}</a>
                </div>
            </div>
        </div>
        <div class="wallpaper">
            <div class="list flex flex-wrap">
                <div class="list-item" :key="item.id" v-for="item in data.datas.list">
                    <div class="img"><img :src="item.img" :alt="item.title"></div>
                </div>
            </div>
        </div>
        <ToTop></ToTop>
    </Layout>
</template>
<script>
    mainObj.toTop.init()
</script>
<style lang="less" scoped>
.wallpaper {
    min-width: 360px;
    .list {
        max-width: 1200px;
        margin: 0 auto 10px;
        padding: 0 5px;
        .list-item {
            margin-right: 10px;
            margin-bottom: 10px;
            width: 22.2%;
            @media screen and (min-width: 820px) and (max-width: 1200px) {
                width: calc(100% / 3 - 12px);
                &:nth-child(3n) {
                    margin-right: 0;
                }
            }
            @media screen and (max-width: 819px) {
                width: calc(100% / 2 - 5px);
                &:nth-child(2n) {
                    margin-right: 0;
                }
            }
            @media screen and (min-width: 1201px) and (max-width: 1920px) {
                width: 24%;
                &:nth-child(4n) {
                    margin-right: 0;
                }
            }
            .img {
                height: auto;
                width: 100%;
                background-color: #ccc;
                img {
                    width: 100%;
                    height: auto;
                }
            }
        }
    }
}
</style>